<script>
import {
  Scene,
  PerspectiveCamera,
  WebGLRenderer,
  Vector3,
  CubeGeometry,
  MeshLambertMaterial,
  Mesh,
  DirectionalLight
} from 'three'

import Detector from 'three/examples/js/Detector'
export default {
  template: '<div style="width: 100%; height: 100%"></div>',
  data() {
    return {
      scene: null,
      camera: null,
      renderer: null,
      cube: null,
      ele: null
    }
  },
  mounted() {
    this.ele = this.$el

    if (Detector.webgl) {
      this.threeStart()
    } else {
      const warning = Detector.getWebGLErrorMessage()
      this.ele.appendChild(warning)
    }
  },
  methods: {
    initThree () {
      const width = this.ele.clientWidth
      const height = this.ele.clientHeight
      this.renderer = new WebGLRenderer({
        antialias: true
      })
      this.renderer.setSize(width, height)
      this.ele.appendChild(this.renderer.domElement)
      this.renderer.setClearColor(0xffffff, 1)
    },
    initCamera () {
      const width = this.ele.clientWidth
      const height = this.ele.clientHeight
      this.camera = new PerspectiveCamera(45, width / height, 1, 10000)
      this.camera.position.set(600, 0, 600)
    },
    initScene () {
      this.scene = new Scene()
    },
    initLight () {
      const light = new DirectionalLight(0xff0000, 1)
      light.position.set(10, 0, 5)
      this.scene.add(light)
    },
    initObject () {
      const geometry = new CubeGeometry(200, 100, 50, 4, 4)
      const material = new MeshLambertMaterial({ color: 0xffff00 })
      const mesh = new Mesh(geometry, material)
      mesh.position.set(0, 0, 0)
      this.scene.add(mesh)

      const geometry2 = new CubeGeometry(200, 100, 50, 4, 4)
      const material2 = new MeshLambertMaterial({ color: 0xffff00 })
      const mesh2 = new Mesh(geometry2, material2)
      mesh2.position.set(-300, 0, 0)
      this.scene.add(mesh2)

    },
    threeStart () {
      this.initThree()
      this.initCamera()
      this.initScene()
      this.initLight()
      this.initObject()
      this.renderer.clear()
      this.renderer.render(this.scene, this.camera)
    }
  }
}
</script>